<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>学习计算属性</h3>
        <p>计算属性：{{ reversedMsg }}</p>
        <p>计算属性：{{ reversedMsg }}</p>
        <p>计算属性：{{ reversedMsg }}</p>
        <hr>
        <p>函数：{{fReversedMsg()}}</p>
        <p>函数：{{fReversedMsg()}}</p>
        <p>函数：{{fReversedMsg()}}</p>
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        // 计算属性的特点：缓存
        //  - 如果计算属性所依赖的数据项并没有发生变化，则就算使用多个计算函数，其函数也只执行一次
        //    因为它把结果缓存起来了。

        const vm = new Vue({
            el: '#app',
            data: {
                msg: 'javascript'
            },
            methods: {
                fReversedMsg () {
                    console.log( '函数 fReversedMsg' )
                    //把msg的翻转一下
                    let newMsg = this.msg.split('').reverse().join('')
                    return newMsg
                }
            },
            computed: {
                reversedMsg () {
                    console.log( 'reversedMsg' )
                    //把msg的翻转一下
                    let newMsg = this.msg.split('').reverse().join('')
                    return newMsg
                }
            }
        })
        // 
        setTimeout (function() {
            vm.msg = "abc"
            // 由于计算属性有缓存，虽然在页面上用到三次，但它的函数体只执行一次。
            // 对于普通的函数，在页面上用到了三次，它就会执行三次
        },2000)
    </script>
</body>
</html>